import React, { Component } from 'react'
import './redio.scss'
export default class ComboBox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            // text: '尺码',
            // show: false,
            // data: ['M', "L", "XL", "XXL", 'XXXL', 'XXXXL'],

        }
    }
	checked =(index,item)=>{
		this.props.checked(index,item)
	}
	shows=()=>{
		this.props.shows()
	}
	
    // checked = (index,item) => {
    //     console.log(index,item);
    //     this.setState({
    //         checkedIndex: index,
    //         text :item,
    //         show:false,

    //     })
    // }
    // shows = () => {

    //     this.setState({
    //         show: !this.state.show,
    //     })
    // }
	
    render() {
        const { text, show } = this.props.state
        return (
            <div className='combobox'>
                <div style={{ marginLeft: 30, padding: 10, border: '1px black solid', width: 100, textAlign: 'center', }}>{text}</div>
                <span style={{ display: (!show ? 'block' : 'none') }} onClick={this.shows}>👇</span>
				<span onClick={this.shows} style={{ display: (show ? 'block' : 'none') }}>👆</span>
                {
                    this.props.data.map((item, index) => {
                        return (
                            <div key={index} className={this.state.checkedIndex ===index?'item2':'item'}  onClick={this.checked.bind(this, index,item)} style={{ display: (show ? 'block' : 'none') }}>
								{item}
							</div>
                        )
                    })
                }
            </div>
        )
    }
}
